// Detail.tsx
import React from 'react';
import { Image, StyleSheet, TouchableOpacity } from 'react-native';
import Navbar from '@/components/Navbar';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
import AntDesign from '@expo/vector-icons/AntDesign';
import { usePayContext } from '../AppContext';
import { useLocalSearchParams } from 'expo-router';
export default function Detail() {
  const { item } = useLocalSearchParams();
  console.log(item,'123');
  const parsedItem = JSON.parse(decodeURIComponent(item));
  console.log(parsedItem,'321');
  
  const { list2_one } = usePayContext();
  console.log(list2_one, '123');

  if (!list2_one) {
    return (
      <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ThemedText>加载中...</ThemedText>
      </ThemedView>
    );
  }

  const [color, setColor] = React.useState('staro');

  return (
    <ThemedView style={{ flex: 1 }}>
      <Navbar title={list2_one?.breed || ''} />
      <ThemedView style={styles.content}>
        <Image source={{ uri: list2_one?.url }} style={styles.image} />
        <ThemedText style={styles.text}>Name: {list2_one?.breed}</ThemedText>
        <ThemedText style={styles.text}>
          <ThemedText>Personality:</ThemedText>
          {list2_one?.traits?.map((item, index) => (
            <ThemedText key={index}>{item} </ThemedText>
          ))}
        </ThemedText>
        <ThemedText style={styles.text}>
          Gender: {list2_one?.gender} {list2_one?.sterilization}{' '}
          {list2_one?.petType}
        </ThemedText>
        <ThemedText style={styles.text}>Price: ￥{list2_one?.price}</ThemedText>
        <ThemedText style={styles.text}>
          Contact: {list2_one?.installment}
        </ThemedText>
        <ThemedText style={styles.text}>
          Location: {list2_one?.province} {list2_one?.city}
        </ThemedText>
        <ThemedView style={{ marginTop: 8, display: 'flex', flexDirection: 'column' }}>
          <ThemedText>配送:</ThemedText>
          {list2_one?.deliveryOptions?.map((item, index) => (
            <ThemedView
              key={index}
              style={{
                width: 400,
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginTop: 8,
              }}
            >
              <ThemedText>{item.method} </ThemedText>
              <ThemedText>{item.description} </ThemedText>
              <ThemedText>{item.cost}元</ThemedText>
            </ThemedView>
          ))}
        </ThemedView>
        <ThemedView style={{ marginTop: 8, display: 'flex', flexDirection: 'column' }}>
          <ThemedText>描述: </ThemedText>
          <ThemedText>{list2_one?.description}</ThemedText>
        </ThemedView>
      </ThemedView>
      <ThemedView style={styles.bottomBar}>
        <ThemedView style={{ display: 'flex', flexDirection: 'column' }}>
          <MaterialCommunityIcons name="message-text-outline" size={24} color="black" />
          <ThemedText>私聊</ThemedText>
        </ThemedView>
        <ThemedView style={{ display: 'flex', flexDirection: 'column' }}>
          <AntDesign name={color} size={24} color="black" />
          <ThemedText onPress={() => setColor('star')}>收藏</ThemedText>
        </ThemedView>
        <TouchableOpacity style={[styles.button, styles.buyButton, styles.buyButtons]}>
          <ThemedText style={styles.buyButtonText}>预约看宠</ThemedText>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.button, styles.buyButton, styles.buyButtons]}>
          <ThemedText style={styles.buyButtonTest}>立即支付</ThemedText>
        </TouchableOpacity>
      </ThemedView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  content: {
    padding: 16,
  },
  image: {
    width: '100%',
    height: 200,
    marginBottom: 16,
  },
  text: {
    marginTop: 8,
    letterSpacing: 1,
  },
  buttonLabel: {
    color: 'red',
    marginTop: 5,
    fontSize: 22,
    fontWeight: 600,
  },
  leftButtons: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  bottomBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    borderTopWidth: 1,
    borderTopColor: '#ccc',
    elevation: 10,
  },
  button: {
    padding: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
  },
  buyButton: {
    width: 100,
    backgroundColor: '#ff4d4f',
    textAlign: 'center',
  },
  buyButtonText: {
    width: 80,
    color: '#fff',
    textAlign: 'center',
  },
  buyButtonTest: {
    width: 80,
    color: '#fff',
    textAlign: 'center',
  },
});